<template>
	<div class="home">
		<van-nav-bar title="竹 林 餐 饮" right-text="退出登录" :left-arrow="false"/>
		<van-grid :border="false" :column-num="3" :square="true" gutter="15" style="margin-top: 15px;">
			<van-grid-item @click="todiancan(item.zhuid)" class="loc" style="border-radius: 5px;" v-for="item of tableList" :class={use:item.state}>
				<div>{{item.zhuid}}号桌</div>
				<div class="lco">{{item.seat}}人/桌</div>
			</van-grid-item>
		</van-grid>
	</div>
</template>

<style>
	html{
		background-color: #eee;
	}
	.lco{
		font-size: 12px;
		background-color: #aaaa7f;
		box-shadow: 0px 0px 1px #555;
		position: absolute;
		right: 5px;
		bottom: 5px;
		padding: 1px;
		line-height: 14px;
		opacity: .8;
		border-radius: 2px;
	}
	.use>div{
		background-color: #ffaa00;
		color:aliceblue;
	}
	.loc>div{
		border-radius: 10px;
	}
</style>

<script>
export default {
	data(){
		return{
			tableList:[]
		}
	},
	methods:{
		todiancan(zhuoid){
			location.href=`${this.$localurl}#/diancan/${zhuoid}`
		}
	},
	mounted(){
		this.axios.get(`${this.$url}/tableList`).then((response)=>{
			this.tableList=response.data
		})
		setInterval(()=>{
			this.axios.get(`${this.$url}/tableList`).then((response)=>{
				this.tableList=response.data
			})
		},2000)
	}
}
</script>
